<template>

  <div>
<!--    <h1>展厅列表</h1>-->
    <Row type="flex" justify="end">
<!--      <Button type="primary" @click="showAddModal()" icon="md-add" class="y_condition" v-has=tRole.STAND_1_101>新增</Button>-->
      <SplitButton type="primary" @click="showAddModal()" @click-item="showAddHtmlModal" icon="md-add" class="y_condition" v-has=tRole.STAND_1_101>
        新增
        <DropdownMenu slot="list" v-once>
          <DropdownItem name="html">新增html展厅</DropdownItem>
        </DropdownMenu>
      </SplitButton>
    </Row>
    <hr/>
    <Row type="flex" justify="end"  >
      <Cascader v-if="isCategoryType(searchParams.type)" :data="categoryList" @on-change="categorySelected" change-on-select clearable
                placeholder="产品分类" class="y_condition" style="text-align: left; min-width: 300px;" v-model="selectedCatIds"></Cascader>
      <Select class="y_condition" placeholder="展厅类型" v-model="searchParams.type" @on-change="changeSearchStandsType" clearable style="text-align: left;">
        <Option v-for="item in standTypes" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
      <Input placeholder="名称或标题" v-model.trim="searchParams.name" class="y_condition" clearable></Input>
      <Input placeholder="固定网址" v-model.trim="searchParams.shortLink" class="y_condition" style="max-width: 250px; width: 250px;" clearable></Input>
      <Input placeholder="标签" v-model.trim="searchParams.tag" class="y_condition" clearable></Input>
      <Select class="y_condition" placeholder="展厅状态" v-model="searchParams.state" clearable style="text-align: left;">
        <Option v-for="item in standStates" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
      <Button type="info" icon="ios-search" class="y_condition" @click="reloadList">查询</Button>
    </Row>

    <!-- 展厅列表 -->
    <List border style="margin: 1rem 0rem">
      <div v-if="list==null || list.length==0">
        <ListItem>
          <div style="width: 100%; text-align: center;">暂无数据</div>
        </ListItem>
      </div>
      <div v-else>
        <ListItem v-for="(item,index) in list" :key="item.id" class="list_item">
          <div class="item_top">
            <p style="font-weight: bold">标题：{{isEmpty(item.title)?item.name:item.title }}</p>
            <div v-if="item.tags!=null && item.tags.length>0">
              <Tag border color="purple" >标签: {{getStandsTags(item.tags)}}</Tag>
            </div>
          </div>

          <KeyValueView title="固定网址" oneline  >
            <a :href="getStandsShortLink(item)" target="_blank">{{getStandsShortLink(item)}}</a>
          </KeyValueView>

          <KeyValueView title="备注" oneline :value="item.note" ></KeyValueView>

          <div style="text-align: left">
            <KeyValueView title="内部名称" :value="item.name" ></KeyValueView>
            <KeyValueView title="显示平台" :value="getStandsPlatform(item.platform)" ></KeyValueView>
            <KeyValueView title="展厅状态" v-if="isAppPlatform(item.platform)">{{getStandsState(item.state)}}</KeyValueView>
            <KeyValueView title="展厅状态">{{getStandsState(item.state)}}-{{getStandsPublishState(item.publishState)}}</KeyValueView>
            <KeyValueView title="最后更新" :value="$tiyBJTime(item.lastModifyTime)" ></KeyValueView>
            <KeyValueView title="最后发布" :value="$tiyBJTime(item.lastPublishTime)" ></KeyValueView>
          </div>



          <div class="item_bottom" >
            <p>
              <Tag :color="item.type===200||item.type===100?'purple':'default'">{{getStandsType(item.type)}}</Tag>
<!--              <Tag color="default">{{getStandsPlatform(item.platform)}}</Tag>-->
            </p>

            <template v-if="isAppPlatform(item.platform)">
              <Button type="success" size="small" style="margin-left: 0.5rem;margin-bottom: 0.5rem" @click="publishStands(item.id)" v-has=tRole.STAND_1_202
                      v-if="isUnpublished(item.state)">发布</Button>
            </template>
            <template v-else>
              <Button type="info" size="small" style="margin-left: 0.5rem;margin-bottom: 0.5rem" @click="previewStands(index)" v-has=tRole.STAND_1_203
                      >预览</Button>
              <Button type="success" size="small" style="margin-left: 0.5rem;margin-bottom: 0.5rem" @click="publishPage(index)" v-has=tRole.STAND_1_203
                      v-if="isPreviewed(item.publishState)">发布</Button>
            </template>
            <Button type="warning" size="small" style="margin-left: 0.5rem;margin-bottom: 0.5rem" @click="offlineStands(item.id)" v-has=tRole.STAND_1_202
                    v-if="isCommonType(item.type) && isPublished(item.state)">下线</Button>
            <Button type="primary" size="small" style="margin-left: 0.5rem;margin-bottom: 0.5rem" @click="showModifyModal(item)" v-has=tRole.STAND_1_201>编辑</Button>
            <Button type="error" size="small" style="margin-left: 0.5rem;margin-bottom: 0.5rem" @click="deleteStands(item)" v-has=tRole.STAND_1_204
                    v-if="isCommonType(item.type) || isHtmlType(item.type)">删除</Button>
          </div>
        </ListItem>
      </div>
    </List>
    <!-- 分页 -->
    <div style="text-align: right;">
      <Page :total="page.total" :page-size="page.pageSize" :current="page.pageNum"
            @on-change="changePageNum" @on-page-size-change="changePageSize" :page-size-opts="page.options"
            show-sizer show-elevator/>
    </div>

    <Modal v-model="status.modalAdd.isShow" title="新增展厅" :width="700"
      :mask-closable="false">
      <a-stand-form ref="AStandAdd" :stands-model="addStandsModel"></a-stand-form>
      <div slot="footer">
        <Button @click="hideAddModal()">取消</Button>
        <Button type="primary" @click="addStands()">保存</Button>
      </div>
    </Modal>

    <Modal v-model="status.modalAddHtml.isShow" title="新增展厅" :width="700"
           :mask-closable="false">
      <html-stand-form ref="AStandAddHtml" :stands-model="addHtmlStandsModel"></html-stand-form>
      <div slot="footer">
        <Button @click="hideAddHtmlModal()">取消</Button>
        <Button type="primary" @click="addHtmlStands()">保存</Button>
      </div>
    </Modal>

    <Modal v-model="status.modalModify.isShow" title="编辑展厅" fullscreen :footer-hide="true"
           :mask-closable="false">
      <a-stand-modify ref="AStandEdit" :stands-id="editParams.standsId" :modify-time="editParams.modifyingTime"></a-stand-modify>
    </Modal>

    <Modal v-model="status.modalModifyHtml.isShow" title="编辑展厅" fullscreen :footer-hide="true"
           :mask-closable="false">
      <html-stand-modify ref="HtmlStandEdit" :stands-id="editHtmlParams.standsId" :modify-time="editHtmlParams.modifyingTime"></html-stand-modify>
    </Modal>

    <Modal v-model="status.modalParents.isShow" title="解除展厅关联" :width="800" :mask-closable="false" footer-hide>
      <parent-showroom-list :showroom-id="parentsParam.showroomId" :current-time="parentsParam.currentTime"
                            @okClick="afterRemoveParents" @cancelClick="hideParentsModal"></parent-showroom-list>
    </Modal>

    <Modal v-model="status.modalChildren.isShow" title="解除展厅关联" :width="800" :mask-closable="false" footer-hide>
      <child-showroom-list :ok-text="status.modalChildren.okText" :showroom-id="childrenParam.showroomId" :current-time="childrenParam.currentTime"
                            @okClick="afterRemoveChildren" @cancelClick="hideChildrenModal"></child-showroom-list>
    </Modal>
  </div>
</template>

<script>
import AStandForm from "./AStandForm"
import AStandModify from "./AStandModify"
import commonData from "./js/stand/common_data"
import tiyData from "./js/stand/list_data"
import KeyValueView from "../widgets/KeyValueView";
import {
  queryStandsList,
  resetAddParam,
  addStands,
  deleteStands,
  showModifyModal,
  publishStands,
  offlineStands,
  previewStands,
  publishPage,
  beforeOfflineStands,
  beforePublishStands,
  beforePreviewStands,
  beforePublishPage,
  addHtmlStands,
  showModifyHtmlModal, getReturnFilters
} from "./js/stand/list_funs"
import {createCategoryCascader, createCategoryList, getProductCommonData, isEmpty} from "../js/commonUtils";
import ParentShowroomList from "./parentShowrromList/ParentShowroomList";
import ChildShowroomList from "./childShowroomList/ChildShowroomList";
import SplitButton from "../impProduct/SplitButton/SplitButton";
import HtmlStandForm from "./HtmlStandForm";
import HtmlStandModify from "./HtmlStandModify";

export default {
  data(){
    return {
      tRole:{
          STAND_1_101:"STAND-1-101",
          STAND_1_201:"STAND-1-201",
          STAND_1_202:"STAND-1-202",
          STAND_1_203:"STAND-1-203",
          STAND_1_204:"STAND-1-204"
      },
      categoryList: commonData.categoryList,
      selectedCatIds: [],
      standTypes: commonData.standsDic.types,
      standStates: commonData.standsDic.states,
      platforms: commonData.standsDic.platforms,
      status: tiyData.tStatus,
      page: tiyData.tPage,
      list: tiyData.tData.standsList,
      searchParams: tiyData.tParam.searchParam,
      editParams: tiyData.tParam.editParam,
      editHtmlParams: tiyData.tParam.editHtmlParam,
      addStandsModel: tiyData.tParam.addParam,
      addHtmlStandsModel: tiyData.tParam.addHtmlParam,
      parentsParam: tiyData.tParam.parentsParam,
      childrenParam: tiyData.tParam.childrenParam,
    }
  },
  components: {
    HtmlStandModify,
    HtmlStandForm,
    SplitButton,
    ParentShowroomList, ChildShowroomList,
    AStandForm, AStandModify, KeyValueView
  },
  methods: {
    isEmpty(val) {
      return isEmpty(val);
    },
    showAddModal() {
      resetAddParam(this);
      tiyData.tStatus.currentStep = 0;
      tiyData.tStatus.modalAdd.isShow = true;
    },
    showAddHtmlModal(name) {
      if(name == "html") {
        tiyData.tStatus.modalAddHtml.isShow = true;
      }
    },
    hideAddModal() {
      tiyData.tStatus.modalAdd.isShow = false;
    },
    addStands() {
      addStands(this);
    },
    hideAddHtmlModal() {
      tiyData.tStatus.modalAddHtml.isShow = false;
    },
    addHtmlStands() {
      addHtmlStands(this);
    },
    reloadList() {
      tiyData.tPage.pageNum = 1;
      this.queryStandsList();
    },
    queryStandsList() {
      queryStandsList(this);
    },
    changePageNum(pageNum) {
      tiyData.tPage.pageNum = pageNum;
      this.queryStandsList();
    },
    changePageSize(pageSize) {
      tiyData.tPage.pageNum = 1;
      tiyData.tPage.pageSize = pageSize;
      this.queryStandsList();
    },
    getStandsState(state) {
      let element = commonData.standsDic.states.find(element => element.value == state);
      return element==null?"":element.label;
    },
    getStandsPublishState(publishState) {
      let element = commonData.standsDic.pageStates.find(element => element.value == publishState);
      return element==null?"":element.label;
    },
    getStandsShortLink(item) {
      if(isEmpty(item.shortLink)) {
        if(this.isIndexPageType(item.type)) {
          return this.$store.getters.webDomain;
        }else{
          return "";
        }
      }else{
        return this.$store.getters.webDomain+item.shortLink;
      }
    },
    getStandsType(type) {
      let element = commonData.standsDic.types.find(element => element.value == type);
      return element==null?"":element.label;
    },
    getStandsPlatform(platform) {
      let element = commonData.standsDic.platforms.find(element => element.value == platform);
      return element==null?"":element.label;
    },
    getStandsTags(tags) {
      if(tags==null || tags=="") {
        return "";
      }
      return this.$toJson(tags).join(",");
    },
    showModifyModal(item) {
      if(this.isHtmlType(item.type)) {
        showModifyHtmlModal(item.id);
      }else{
        showModifyModal(item.id);
      }
    },
    deleteStands(item) {
      if(item.type == commonData.standsDic.indexPageType) {
        this.$Modal.error({title: "错误", content: "首页展厅无法删除！"});
      }else{
        let self = this;
        this.$Modal.confirm({
          title: "确认",
          content: "确认删除此展厅吗？",
          okText: "删除",
          cancelText: "取消",
          onOk() {
            deleteStands(self, item.id);
          }
        });
      }
    },
    afterRemoveParents() {
      tiyData.tStatus.modalParents.isShow = false;
      offlineStands(this, tiyData.tParam.parentsParam.showroomId, queryStandsList);
    },
    hideParentsModal() {
      tiyData.tStatus.modalParents.isShow = false;
    },
    afterRemoveChildren() {
      tiyData.tStatus.modalChildren.isShow = false;
      if(tiyData.tStatus.modalChildren.type == 1) {
        publishStands(this, tiyData.tParam.childrenParam.showroomId, queryStandsList);
      }else if(tiyData.tStatus.modalChildren.type == 2){
        previewStands(this, tiyData.tParam.childrenParam.index);
      }else if(tiyData.tStatus.modalChildren.type == 3) {
        publishPage(this, tiyData.tParam.childrenParam.index);
      }
    },
    hideChildrenModal() {
      tiyData.tStatus.modalChildren.isShow = false;
    },
    isUnpublished(state) {
      return state == commonData.standsDic.unPublishedState;
    },
    isPreviewed(publishState) {
      return publishState == commonData.standsDic.previewedPublishState;
    },
    isPublished(state) {
      return state == commonData.standsDic.publishedState;
    },
    isModified(publishState) {
      return publishState == commonData.standsDic.modifiedPublishState;
    },
    isPcPlatform(platform) {
      return platform == commonData.standsDic.pcPlatform;
    },
    isAppPlatform(platform) {
      return platform == commonData.standsDic.appPlatform;
    },
    isUnionPlatform() {
      return platform == commonData.standsDic.unionPlatform;
    },
    publishStands(standsId) {
      beforePublishStands(this, standsId, queryStandsList);
    },
    offlineStands(standsId) {
      beforeOfflineStands(this, standsId, queryStandsList);
    },
    previewStands(index) {
      beforePreviewStands(this,index);
    },
    publishPage(index) {
      beforePublishPage(this,index);
    },

    isCommonType(type) {
      return type == commonData.standsDic.commonType;
    },
    isCategoryType(type) {
      return type == commonData.standsDic.categoryType;
    },
    isIndexPageType(type) {
      return type == commonData.standsDic.indexPageType;
    },
    isHtmlType(type) {
      return type == commonData.standsDic.htmlType;
    },
    categorySelected(value, selectedData) {
      if (0 < selectedData.length) {
        tiyData.tParam.searchParam.classificationId = selectedData[selectedData.length - 1].value;
        tiyData.tParam.searchParam.classificationLevel = selectedData[selectedData.length - 1].level;
      }else{
        tiyData.tParam.searchParam.classificationId = "";
        tiyData.tParam.searchParam.classificationLevel = null;
      }
    },
    changeSearchStandsType(value) {
      if(value != commonData.standsDic.categoryType) {
        tiyData.tParam.searchParam.classificationId = "";
        tiyData.tParam.searchParam.classificationLevel = null;
        this.selectedCatIds.splice(0);
      }
    },
    resetPage() {
      this.selectedCatIds.splice(0);
      this.searchParams.type = null;
      this.searchParams.platform = null;
      this.searchParams.state = null;
      this.searchParams.title = "";
      this.searchParams.name = "";
      this.searchParams.shortLink = "";
      this.searchParams.tag = "";
      this.searchParams.classificationId = "";
      this.searchParams.classificationLevel = null;
      this.list.splice(0);
    }
  },
  created() {
    this.resetPage();
    // if(commonData.categoryList.length == 0) {
      let types = [];
      types.push(3);//查询产品分类
      getProductCommonData(this, commonData.categoryList, types, true, createCategoryCascader);
    // }
    //查询屏蔽切面选项
    if(commonData.returnFilters.length == 0) {
      getReturnFilters(this, commonData.returnFilters);
    }
  },
  mounted() {
    //如果url参数里有展厅id，说明是从分类编辑页面跳转过来，直接打开对应展厅进行编辑
    if(this.$route.query.standId){
        showModifyModal(this.$route.query.standId);
    }
  }
}
</script>

<style lang="less" scoped>
@import  (once,optional)  "../css/base.less";

.item_key{
  color: @tiyTextLightColor;
  padding: 0.3rem 0;
}


.list_item{
  .flex-colum-wrap;
  justify-items: left;
  align-items: start;
  .item_top{
    width: 100%;
    .flex-row-wrap;
    justify-content: space-between;
  }

  .item_bottom{
    margin-top: 0.3rem;
    width: 100%;
    .flex-row-wrap;
    justify-content: space-between;
    p{
      flex-grow: 2;
      text-align: left;
    }
  }
}
</style>
